<!-- 卖方订单列表 -->
<template>
    <div class="content">
        <el-menu :default-active="orderType" @select="changeOrderType" mode="horizontal" class="orderType">
            <el-menu-item index="newOrder">最新订单<MarkRemind :tipsNum="this.allTips.drawerOrderCount"/></el-menu-item>
            <el-menu-item index="historyOrder">历史订单</el-menu-item>
        </el-menu>
        <el-row class="filter_btn">
            <el-col :span="16">
                <el-col :span="2" class="title hpx-label">
                    订单列表
                </el-col>
                <el-radio-group v-model="orderStatus" size="small" @change="changeStatus()">
                    <el-radio-button v-for="item in orderOptions" :label="item.key" :key="item.key">{{item.label}}<MarkRemind :tipsNum="getSellOrderTips(item)" class="bid_tips"/></el-radio-button>
                </el-radio-group>
            </el-col>
            <el-col :span="6" :offset="2" class="delete">
                <el-button type="danger" size="mini" @click="remove()" :disabled="sectionArr.length == 0 && isSelect"><i class="iconfont icon-shanchu"></i> 删除</el-button>
                <el-button type="text" v-if="isSelect" @click="cancelCheck">取消</el-button>
            </el-col>
        </el-row>
        <template>
                   <!-- @remove="click_delete" -->
            <Table :tableData="tableData"
                   :isSelect="isSelect"
                   @selection="selection"
                   @change="changePage"
                   @changes="changeSize"
                   :tableName="'orderList'">
                <template slot-scope="{scope}" class="operationBtn">
                    <el-button type="primary"
                        size="small" 
                        @click="endorse(scope.row)" 
                        v-if="scope.row.order_status_id == 806">
                        确认背书
                    </el-button>
                    <el-popover
                        placement="bottom-start"
                        title="背书信息"
                        width="200"
                        trigger="hover">
                        <el-row>
                            机构名称：{{ scope.row.receiver_account_person }}
                        </el-row>
                        <el-row>
                            开户行：{{ scope.row.receiver_account_bank }}
                        </el-row>
                        <el-row>
                            账号：{{ scope.row.receiver_account_number }}
                        </el-row>
                        <el-row>
                            联行号：{{ scope.row.receiver_account_bank_number }}
                        </el-row>
                        <el-button type="text" size="small" slot="reference" v-if="scope.row.order_status_id == 806">
                            <i class="iconfont icon-beishuxinxi"></i> 背书信息
                        </el-button>
                    </el-popover>
                    <el-button type="primary" 
                        plain
                        size="small" 
                        @click="evaluate(scope.row)" 
                        v-if="scope.row.order_status_id == 810 || scope.row.order_status_id == 812">
                        评价
                    </el-button>
                    <el-button type="text" size="small" @click="$router.push(`/seller/order/detail/${scope.row.id}`)">
                        <i class="iconfont icon-xiangqing2"></i> 详情
                    </el-button>
                </template>
            </Table>
        </template>
        <!-- 评价弹窗 -->
        <DialogEvaluate ref="evaluate" @submitEvaluate="submitEvaluate"/>
        <!-- 背书弹窗 -->
        <DialogInput ref="endorseDialog" title="卖方确认背书操作">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row class="warning">是否确认背书?</el-row>
                <el-row>请确认买票方付款后，再到网银去背书，否则后果自负!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmEndorse()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 背书成功 -->
        <DialogInput ref="endorseSuccess" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>背书成功!</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
        <!-- 删除订单警告弹框 -->
        <DialogInput ref="delete" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>是否删除已选择的{{sectionArr.length}}个订单?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDetail()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 成功删除弹框 -->
        <DialogInput ref="success" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>已成功删除订单</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    import moment from 'moment';
    import DialogEvaluate from '@component/common/DialogEvaluate.vue'
    import { ellipsis } from '@/util/format'
    import MarkRemind from '@component/common/MarkRemind.vue';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    // import { setInterval } from 'timers';
    import calc from 'calculatorjs'
    @Component({
        components: {
            Table,
            DialogInput,
            DialogEvaluate,
            MarkRemind
        },
        computed: {
            ...mapState({
                allTips: 'allTips'
            })
        },
        methods: {
            ...mapActions([
                'getAllTips'
            ])
        }
    })
    export default class SellerOrder extends Vue {
        getSellOrderTips (item) {
            switch (item.key){
                case 'B':
                return this.allTips.drawerEndorseCountNumNew;
                case 'D':
                return this.allTips.drawerCheckCountNumNew;
            }
        }
        orderType:string = 'newOrder'
        orderStatus:string = ''
        isSelect:boolean = false
        orderId: string | number;
        sectionArr = []
        //单个订单信息
        singleOrder = {}
        newOrderOptions = [{
                label: '全部订单',
                key: ''
            },{
                label: '待背书',
                key: 'B'
            },{
                label: '待核验',
                key: 'D'
            },{
                label: '交易完成',
                key: 'E'
            },{
                label: '交易关闭',
                key: 'G'
            }
        ]
        oldOrderOptions = [{
                label: '全部订单',
                key: ''
            },{
                label: '交易完成',
                key: 'E'
            },{
                label: '交易关闭',
                key: 'G'
            }
        ]
        orderOptions = this.newOrderOptions
        tableData:TableData = {
            header:[
                {
                    label: '订单号',
                    key: 'order_number'
                },
                {
                    label: '发布时间',
                    key: 'bill_publishing_time',
                    formatter: (row:any) => moment(row.bill_publishing_time).format('MM-DD HH:mm')
                },
                {
                    label: '承兑人',
                    key: 'acceptor_name',
                    formatter: (row:any) => ellipsis(row.acceptor_name,'...',10)
                },
                {
                    label: '票面金额(万)',
                    key: 'bill_sum_price',
                    formatter: (row:any) => calc.div(row.bill_sum_price,10000)
                },
                {
                    label: '到期时间',
                    key: 'bill_deadline_time'
                },
                {
                    label: '每十万扣',
                    key: 'order_every_plus_deduct',
                    formatter: (row:any) => row.bill_bidding_model_id == 3210 ? '一口价' + row.order_every_plus_deduct + '元' : '竞价'
                },
                {
                    label: '电票所在户',
                    key: 'bill_bank_name'
                },
                {
                    label: '票据后六位',
                    key: 'bill_number',
                    formatter: (row:any) => row.bill_number.substring(row.bill_number.length-6)
                },
                {
                    label: '交易对手',
                    key: 'receiver_name'
                },
                {
                    label: '状态',
                    key: 'order_status_name'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }

        //最新订单/历史订单切换
        changeOrderType (tab) {
            this.orderType = tab
            this.orderStatus = ''
            tab == "newOrder" ? this.orderOptions = this.newOrderOptions : this.orderOptions = this.oldOrderOptions
            this.tableData.footer.currentPage = 1
            this.getSellerOrders()
        }
        // 获取卖方订单
        async getSellerOrders () {
            let params = {
                orderType: this.orderType,
                status: this.orderStatus,
                n: this.tableData.footer.pageSize,
                p: this.tableData.footer.currentPage
            }
            let res = await this.$http.get('/orders/order/getForDrawerOrder',{params},{loading:false})
            if(res.status == 200){
                this.tableData.body = res.data.items
                this.tableData.footer.total = res.data.totalNum
                this.tableData.footer.pageSize = 10
            }
        }
        //订单状态切换
        changeStatus () {
            this.tableData.footer.currentPage = 1
            this.getSellerOrders()
        }
        //显示/隐藏勾选框
        remove () {
            this.isSelect ? this.$refs['delete'].openDialog() : this.isSelect = true
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //删除
        // click_delete () {
        //     this.$refs['delete'].openDialog();
        // }
        //确定删除
        async confirmDetail () {
            let willDelete = this.sectionArr.map(item => item.id)
            let res = await this.$http.delete(`orders/order/${willDelete.join(',')}`)
            if(res.status == 200){
                this.$refs['delete'].closeDialog();
                this.$refs['success'].openDialog();
                this.isSelect = false
                this.getSellerOrders()
            }
        }

        // 背书
        endorse (row) {
            this.orderId = row.id;
            this.$refs['endorseDialog'].openDialog();
        }
        // 确认背书
        async confirmEndorse () {
            // 背书接口
            let res = await this.$http.put(`orders/orderEndorsement/${this.orderId}`)
            if (res.status < 300){
                this.$refs['endorseDialog'].closeDialog();
                this.$refs['endorseSuccess'].openDialog();
                this.getAllTips()
                this.getSellerOrders();
            }
        }

        //评价
        evaluate (row) {
            this.singleOrder = row;
            this.$refs['evaluate'].addEvaluateDialog();
        }
        //提交评价
        async submitEvaluate (info) {
            console.log(this.singleOrder)
            let params = {
                ...info,
                orderId: this.singleOrder.id,
                drawerId: this.singleOrder.drawer_id
            }
            let res = await this.$http.post('order/appraisal/drawer',params)
            if(res.status == 200){
                this.$refs['evaluate'].closeDialog();
                this.$alert(res.msg,'提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                this.getSellerOrders()
            }
        }
        closeDialog () {
            this.$refs['endorseDialog'].closeDialog();
            this.$refs['endorseSuccess'].closeDialog();
            this.$refs['success'].closeDialog();
        }

        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getSellerOrders()
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getSellerOrders()
        }
        timer:any = null
        mounted () {
            this.getSellerOrders()
            this.timer = setInterval(()=>{
                this.getSellerOrders()
                this.getAllTips()
            },60000)
        }
        destroyed() {
            clearInterval(this.timer)
        }
    }
</script>

<style lang="scss" scoped>
    .el-tabs__item{
        font-size: 16px !important;
    }
    .filter_btn{
        padding-top: 16px;
    }
    .remind{
        font-size: 20px;
    }
    .operationBtn .el-col{
        text-align: center;
    }
    .bid_tips {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>